<template>
  <div>
    <div ref="container" style="height: 150px"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
// 引入get方法 ES6模块化规范
import { get } from '@/utils/request'
let moment = require('moment');
// 引入状态辅助函数
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 存放温度数据
      tempData: [],
      // 图表实例
      columnPlot: null
    }
  },
  computed: {
    // 映射公共数据
    ...mapState(['ed'])
  },
  watch: {
    // 监听设备变化
    async ed() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 300,
        engineer_id: this.ed.engineer_id,
        device_id: this.ed.device_id
      });
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].humidity = 53;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.columnPlot.changeData(this.tempData);
    }
  },
  methods: {
    moment,
    // 获取温度数据 
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 100,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].humidity = 53;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      this.createLine();
      // console.log(res,'获取响应');
    },
    createLine() {

      const columnPlot = new Column(this.$refs.container, {
        data:this.tempData,
        xField: 'insert_time',
        yField: 'humidity',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          sales: {
            alias: '销售额',
          },
        },
        coordinate: [{ type: 'reflectY' }],
      });

      columnPlot.render();
      this.columnPlot=columnPlot

    },
  },
  created() { },
  mounted() {
    this.getTempData();
  },
};
</script>
<style scoped></style>